<template>
	<view>
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">添加静态评估</block>
		</cu-custom>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in taball" :key="index"
				 @tap="tabSelect" :data-id="index">
					{{item.name}}
				</view>
			</view>
		</scroll-view>

		<form v-for="(item, index) in list" :key="index">
			<view v-if="TabCur == index">
				<view class="quan">
					<view class="tou u-f-ajc">
						<image style="width: 45%; height: 100%;" src="../../static/BasicsBg.png" lazy-load />
						<view class="u-f-column u-f-ajc" style="width: 45%; height: 100%; background-color: #f4f4f4;" @click="chooseImage(index)">
							<image style="width: 100upx;height: 100upx;margin-bottom: 20rpx;" :src="item.assessImg[0] || '../../static/paizhao.png'"
							 mode=""></image>
							<view style="color: #919191;font-size: 22upx;">
								拍照上传体测报告
							</view>
						</view>
					</view>

					<view class="shen">
						<view class="zongj">
							问题反馈
						</view>
					</view>

					<view v-for="(item2, index2) in item.itemList" :key="index2">
						<view v-if="item2.name" class="buwei u-f-ac" @click="isShowClick(index, index2)">
							<view>{{item2.name}}</view>
							<view class="yangshi">{{item2.computedList.join('、')}}</view>
						</view>
						<!-- 健身目标 按钮组 -->
						<menu-item v-if="item2.isShow && item2.name" :menus="item2.showList" :noQita="true" :menuLists="item2.activeList"
						 @menusClick="menusClick($event, index, index2)" />
					</view>


					<view class="shen">
						<view class="zongj" style="margin-top: 50rpx;">
							教练备注
						</view>
					</view>
					<view class="tian">
						<view class="tianx">
							<textarea placeholder="请输入备注" v-model="item.remark" />
							</view>
					</view>
				</view>
				<view class="kong" style="height: 60upx;">

				</view>
				<view class="dibu u-f-ajc" @click="jump" style="font-size: 28upx; font-weight: 555; color: #ffffff;">
					{{TabCur != list.length -1 ? '下一步' : '生成报告'}}
				</view>
				
			</view>

		</form>
	</view>
</template>

<script>
	import menuItem from "../Training_program/components/menuItem.vue"
	import timeJS from "../../common/time.js"
	import { list } from "./consts/静态评估列表.js"
	export default {
		components: {
			menuItem,
		},
		data() {
			return {
				describe: [],
				assessment: [],
				id: '',
				TabCur: 0, //默认tab选中项
				scrollLeft: 0,
				taball: [{
						name: '正面',
						index: 0,
					},{
						name: '左侧',
						index: 1,
					},
					{
						name: '右侧',
						index: 2,
					},
					{
						name: '背部',
						index: 3,
					},
				],
				list: [],
				date: timeJS.gettime.getDate({
					format: true
				}),
			};
		},
		onLoad: function(e) {
			this.list = list;
			if (e.id) {
				this.id = e.id
			}
			// uni.showLoading()
		},
		methods: {
			chooseImage(index) {
				var _this = this
				uni.chooseImage({
					// count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log('选择图片成功回调', res)
						let file = res.tempFilePaths
						var img = ''
						console.log(res.tempFilePaths)
						if (file.length > 0) {
							_this.list[index].assessImg.push(...res.tempFilePaths)
						}
						for (var i = 0; i < res.tempFilePaths.length; i++) {
							let images = []
							uni.uploadFile({
								url: 'https://jxjsservice.jxfit.cn/coach/baseService/uploadFile',
								//仅为示例，非真实的接口地址
								filePath: file[i],
								name: 'file',
								formData: {
									'user': 'test'
								},
								success: (res) => {
									console.log('图片上传成功回调:', res)
									images.push(JSON.parse(res.data).datas.face)
									console.log('查看图片数组', images)
									// if (!_this.list[index].imagess.length) {
										_this.list[index].imagess.push(...images)
									// } else _this.list[index].imagess = [..._this.list[index].imagess , ...images]
									// img = img + JSON.parse(res.data).url + ';'
									// _this.imgurl = img
								}
							});
						}
					}
				});
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			dataComputed() {
				let data = {
					bid: 1,
					gymId: 0,
					userId: uni.getStorageSync("openid"),
					memberId: uni.getStorageSync("phyUser").userId,
					front: {},
					left: {},
					right: {},
					back: {},
				}
				this.list.forEach((item, index) => {
					let obj = {
						    body: [], // 全身
								head: [], // 头部
								shoulder: [], // 肩部
								cervical: [], // 颈椎
								scapula: [], // 肩胛骨
								upperLimb: [], // 上肢
								thoracic: [] ,// 胸椎
								chestLumbarSpine: [], // 胸腰椎
								lumbar: [], // 腰椎
								ribs: [], // 肋骨
								arm: [], // 手臂
								hands: [], // 手部
								pelvic: [], // 骨盆
								feet: [], // 臀线
								hip: [], // 髋关节
								knee: [], // 膝关节
								tibia: [],// 胫骨
								ankle: [], // 脚踝
								// 足部
						    picUrls: item.imagess,
						    remark: item.remark, // 备注
						  }
					
					
					// const items = (ind, val) => item.itemList[ind].activeList.forEach(item => obj[val].push(item.title))
					const items = (ind, val) => obj[val] = item.itemList[ind].computedList;
					
					items(0, 'body');
					items(1, 'head');
					items(2, 'shoulder');
					items(3, 'cervical');
					items(4, 'scapula');
					items(5, 'upperLimb');
					items(6, 'thoracic');
					items(7, 'chestLumbarSpine');
					items(8, 'lumbar');
					items(9, 'ribs');
					items(10, 'arm');
					items(11, 'hands');
					items(12, 'pelvic');
					items(13, 'feet');
					items(14, 'hip');
					items(15, 'knee');
					items(16, 'tibia');
					items(17, 'ankle');
					// items(18, 'hip');
					
					if (index == 0) data.front = obj
					if (index == 1) data.left = obj
					if (index == 2) data.right = obj
					if (index == 3) data.back = obj
				})
				return data
			},
			
			async jump() {
				let goPath = this.list.length
				if (this.TabCur != goPath - 1) {
					 this.TabCur += 1
				} else {
					let data = this.dataComputed()
          console.log(data.front.picUrls.length)
          console.log(data.left.picUrls.length)
          console.log(data.right.picUrls.length)
          console.log(data.back.picUrls.length)
          console.log('查看data', data)
          if (!data.front.picUrls.length && !data.left.picUrls.length && !data.right.picUrls.length && !data.back.picUrls.length) {
            uni.showToast({
            	title: "至少选择一张图片~",
              icon: "loading"
            })
            return
          }
					uni.showToast({
						title: "正在提交...",
            icon: "loading"
					})
          
					let res = await this.$myRuquest({
						url: "/coach/body/addBodyStaticEvaluation",
						method: 'POST',
						data,
						header: {
							"Content-Type": "application/json"
						},
					})
					uni.redirectTo({
						url: './Static_evaluation_list'
					});
				}
			},
			isShowClick(index, index2) {
				this.list[index].itemList.forEach(item => {
					item.isShow = false
				})
				this.list[index].itemList[index2].isShow = true
			},
			menusClick(e, index, index2) {
				this.list[index].itemList[index2].showList = e[0];
				this.list[index].itemList[index2].activeList = e[1];
				let arrs = []
				this.list[index].itemList[index2].activeList.forEach(item => arrs.push(item.title));
				this.list[index].itemList[index2].computedList = arrs;
        // 如果传过去的数组为空的话 默认给他添加值
        // this.list.forEach(item => {
        //   item.itemList.forEach(item2 => {
        //     if (!item2.computedList.length) {
        //       item2.computedList = ['string']
        //     }
        //   })
        // })
				console.log("子组件发射出来的方法1", e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.quan {
		background: #ffffff;
		margin-bottom: 42rpx;
	}

	.tou {
		width: 100%;
		height: 350upx;
		 border-bottom: 20upx solid #F1F1F1;
		 padding: 20rpx 10rpx;
		 box-sizing: border-box;
	}

	.shen {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.zongj {
		font-size: 30upx;
		font-weight: 555;
		margin: 20upx 0 20upx 0;
	}

	.buwei {
		width: 100%;
		padding: 30upx;
		border-bottom: 1upx solid #F1F1F1;
		justify-content: space-between;
		.yangshi {
			width: 70%;
		}
	}

	.tian {
		display: flex;
		justify-content: center;
		padding: 0 0 30rpx;
	}

	.tianx {
		width: 90%;
		height: 280rpx;
		background: #F1F1F1;
		textarea {
			width: 100%;
			height: 100%;
			padding: 15rpx;
			box-sizing: border-box;
		}
	}


	.kongb {
		height: 100upx;
	}

	.dibu {
		height: 100upx;
		background: #39BB9E;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}
</style>
